<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    table {
        width: 500px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
    }

    td,
    th {
        border: 1px solid #333;
    }

    thead tr {
        height: 40px;
        background-color: #ccc;
    }
</style>
<body>

<table cellspacing="0">
    <thead>
    <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

<script>
    // 1.先去准备好学生的数据
    const data = [{
        name: '魏璎珞',
        subject: 'JavaScript',
        score: 100
    }, {
        name: '弘历',
        subject: 'CSS',
        score: 98
    }, {
        name: '傅恒',
        subject: 'HTML',
        score: 99
    }, {
        name: '明玉',
        subject: 'Scala',
        score: 88
    }, {
        name: '大猪蹄子',
        subject: 'Python',
        score: 0
    }];

    const tbody = document.querySelector('tbody');

    // 2.创建行
    for (let i = 0; i < data.length; i++) {
        // 创建 tr 行
        const tr = document.createElement('tr');
        // 遍历对象属性
        for (let attr in data[i]) {
            // 创建 td 单元格
            const td = document.createElement('td');
            td.innerHTML = data[i][attr];
            tr.appendChild(td);
        }

        // 创建最后一列的删除功能键单元格
        const delTd = document.createElement('td');
        delTd.innerHTML = `<a href="javascript:;">删除</a>`;
        tr.appendChild(delTd);

        tbody.appendChild(tr);
    }

    // 3.删除功能
    var as = document.querySelectorAll('tbody tr a');
    for (let a of as) {
        a.onclick = function () {
            // 点击a 删除当前 a 所在行(链接的爸爸的爸爸)
            tbody.removeChild(a.parentElement.parentElement);
        }
    }

    // 4.复制功能 todo


</script>
</body>
</html>
